import React, { Component } from 'react'
import style from './foodCategory.module.scss'
import { FoodCategoryUrl, FoodDetailsUrl, imgUrl, } from '@/api'
import { connect } from 'react-redux'
import { changeCategorySwipeListAction, changeSelectedItemAction, changeCategoryDateListAction } from '@/store/modules/Category/categoryActiveCreate.js'

class FoodCategory extends Component {
    constructor(props) {
        super(props)
        this.state = {
            FoodDetailsList: [],//详细分类数据
            FoodDetailsLeftId: -100,//选择的左边的分类选项
            FoodDetailsRightId: '',//选择的右边的分类选项
            FoodDetailsFlag: false,//是否显示详细分类
        }
    }
    render() {
        return (
            <>
                <div className={style.CategorySwipeBox}>
                    <ul className={style.CategorySwipeUl}>
                        {
                            this.props.categorySwipeList.map((item) => {
                                // console.log(item);
                                return (<li className={this.props.SelectedItem === item.id ? style.CategorySwipeItemTe : style.CategorySwipeItem} key={item.id} onClick={() => { this.changeSelectedItemFn(item) }}>
                                    {item.name}
                                </li>)
                            })
                        }
                    </ul>
                    <div className={style.more} onClick={() => { this.setState({ FoodDetailsFlag: !this.state.FoodDetailsFlag }) }}>
                        <i className={'iconfont icon-xia ' + style.bottoArrow}></i>
                    </div>
                </div>
                {this.state.FoodDetailsFlag ? this.FoodDetailsRender() : ''}
            </>
        )
    }
    FoodDetailsRender = () => {
        return (
            <div className={style.selectCategoryBox}>
                <div className={style.titleBox}>
                    <p className={style.title}>请选择分类</p>
                    <i className={'iconfont icon-X ' + style.hideBtn} onClick={() => { this.setState({ FoodDetailsFlag: !this.state.FoodDetailsFlag }) }}></i>
                </div>
                <div className={style.detailedClassificationBox}>
                    <ul className={style.detailedClassificationLeft}>
                        {
                            this.state.FoodDetailsList.map((item, index) => {
                                if (item.sub_categories.length > 0) {
                                    return (
                                        <li key={index} className={style.detailCategoryLeftItem} onClick={() => { this.changeFoodDetailsLeftId(item.id) }}>
                                            <span className={item.id === this.state.FoodDetailsLeftId ? style.detailCategoryLeftItemNameTe : style.detailCategoryLeftItemName}>{item.name}</span>
                                            <span className={style.detailCategoryLeftItemcount}>{item.count}</span>
                                        </li>
                                    )
                                }
                                return '';
                            })
                        }
                    </ul>
                    <ul className={style.detailedClassificationright}>
                        {
                            this.state.FoodDetailsList.map((item, index) => {
                                if (item.sub_categories.length > 0) {
                                    if (item.id === this.state.FoodDetailsLeftId) {
                                        return item.sub_categories.map((itemTwo) => {
                                            // console.log(itemTwo);
                                            return (
                                                <li key={itemTwo.id} className={itemTwo.id === this.state.FoodDetailsRightId ? style.detailCategoryRightItemTe : style.detailCategoryRightItem} onClick={() => { this.changeFoodDetailsRightId(itemTwo) }}>
                                                    <img className={style.detailCategoryRightItemImg} src={imgUrl + itemTwo.image_url} alt="" />
                                                    <span className={style.detailCategoryRightItemname}>{itemTwo.name}</span>
                                                    <span className={style.detailCategoryRightItemcount}>{itemTwo.count}</span>
                                                </li>
                                            )
                                        })
                                    }
                                }
                                return '';
                            })
                        }
                    </ul>
                </div>
                <div className={style.seizeASeat}></div>
            </div>
        )
    }
    componentDidMount() {
        this.getFoodCategoryFn()
        this.getDetailedClassification();
    }
    //获取左右滑动的食品分类
    getFoodCategoryFn = () => {
        let param = {
            terminal: 'h5',
            entry_id: this.props.id,
            latitude: this.props.currentLocation.latitude,
            longitude: this.props.currentLocation.longitude
        }
        FoodCategoryUrl(param).then((res) => {
            this.props.changecategorySwipeListFn(res)
        })
    }
    changeSelectedItemFn = (item) => {
        this.props.changeYesSelectedItemFn(item.id)
    }
    //获取详细分类
    getDetailedClassification = () => {
        let param = {
            latitude: this.props.currentLocation.latitude,
            longitude: this.props.currentLocation.longitude
        }
        FoodDetailsUrl(param).then((res) => {
            this.setState({
                FoodDetailsList: res,
            })
        })
    }
    changeFoodDetailsLeftId = (id) => {
        this.setState({
            FoodDetailsLeftId: id
        })
    }
    changeFoodDetailsRightId = (item) => {
        this.setState({
            FoodDetailsRightId: item.id
        })
        let param = {
            latitude: this.props.currentLocation.latitude,
            longitude: this.props.currentLocation.longitude,
            keyword: null,
            offset: 0,
            limit: 8,
            terminal: 'h5',
            rank_id: null,
            restaurant_category_ids: [item.id],
            brand_ids: 1,
            extras: ['activities', 'tags']
        }
        console.log(item, param);
        // categoryDateListUrl(param).then((res) => {
        //     console.log(res);
        // })
    }
}

const stateToProps = (state) => {
    return {
        currentLocation: state.region.currentLocation,
        LocationSelected: state.shipping.LocationSelectedm,
        categorySwipeList: state.Category.categorySwipeList,
        SelectedItem: state.Category.SelectedItem
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changecategorySwipeListFn: (value) => {//修改食品分类
            let action = value;
            dispatch(changeCategorySwipeListAction(action))
        },
        changeYesSelectedItemFn: (value) => {//修改选中的食品分类
            let action = value;
            dispatch(changeSelectedItemAction(action))
        },
        changeCategoryDateListFn: (value) => {//修改分类食品列表数据
            let action = value;
            dispatch(changeCategoryDateListAction(action))
        },
    }
}


export default connect(stateToProps, dispatchToProps)(FoodCategory)
